<%@ page language="java" pageEncoding="UTF-8"%>
<link
        href="../resources/Hplus/css/plugins/dataTables/dataTables.bootstrap.css"
        rel="stylesheet">

<input id="menuTarget" type="hidden" value="memberQueryToList" />
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-lg-10">
    <h2>用户管理</h2>
    <ol class="breadcrumb">
      <li><a href="#">用户管理</a></li>
      <li><strong>用户列表</strong></li>
    </ol>
  </div>
</div>

<div class="wrapper wrapper-content  animated fadeInRight">
  <div class="row">
    <div class="col-lg-12">
      <div class="ibox ">
        <div class="ibox-title">
          <h5>会员列表</h5>
        </div>
        <div class="ibox-content">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="col-lg-1 control-label">用户名:</label>
              <div class="col-lg-3">
                <input type="text" id="realName" placeholder="用户名"
                       class="form-control">
              </div>
              <label class="col-lg-1 control-label">用户编号:</label>
              <div class="col-lg-3">
                <input type="text" id="userNo" placeholder="用户编号"
                       class="form-control">
              </div>
              <div class="col-lg-4">
                <a class="btn btn-primary" id="searchBtn"><i class="fa fa-search"></i> 查找</a>
              </div>

            </div>
          </div>

          <table id="userTable"
                 class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
              <th>序号</th>
              <th>用户编号</th>
               <th>用户姓名</th>
              <th>所属小区</th>
              <th>房号</th>
              <th>用户地址</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
          </table>

        </div>
      </div>
    </div>
  </div>
</div>



<!-- Data Tables -->
<script
        src="../resources/Hplus/js/plugins/dataTables/jquery.dataTables.js"></script>
<script
        src="../resources/Hplus/js/plugins/dataTables/dataTables.bootstrap.js"></script>

<!-- Custom and plugin javascript -->
<script src="../resources/Hplus/js/hplus.js?v=2.2.0"></script>
<script src="../resources/Hplus/js/plugins/pace/pace.min.js"></script>

<script src="../resources/datejs/date.js"></script>
<script type="text/javascript" src="../resources/js/common/common.js"></script>
<%--<script src="//cdn.bootcss.com/datatables-tabletools/2.1.5/js/TableTools.js"></script>
<script src="//cdn.bootcss.com/datatables-tabletools/2.1.5/js/ZeroClipboard.js"></script>--%>
<!-- Page-Level Scripts -->
<script type="text/javascript">
  $(document).ready(function () {
    var table = $('#userTable').dataTable({
      serverSide: true,
      searching: false,
      lengthChange: false,
      autoWidth: false,
      ajax: function(data, callback, settings) {
        var orderLength = data.order.length;
        var sortProperty = orderLength == 0 ? '' : settings.aoColumns[data.order[0].column].sort || data.columns[data.order[0].column].data;
        var sortDirection = orderLength == 0 ? '' : data.order[0].dir;
        var realName = $.trim($('#realName').val());
        var userNo = $.trim($('#userNo').val());
        $.post(preUrl+'/member/memberQueryList.json', {
          pageSize: data.length,
          pageNum: data.start / data.length + 1,
          'sort.property' : sortProperty,
          'sort.direction' : sortDirection,
          'realName': realName,
          'userNo': userNo
        }, function(res) {
          var data = res.data;
          callback({
            recordsTotal: data.totalCount,
            recordsFiltered: data.totalCount,
            data: data.data
          });
        });
      },
      columnDefs: [
        { defaultContent: '', targets: '_all'}
      ],
      order: [],
      columns: [
        {
          data: 'rn',
          sort:'rn',
          width: '10%'
        },{
          data: 'userNo',
          sort:'HS_USER_NO',
          width: '20%'
        },{
            data: 'userName',
            sort:'HS_USER_NAME',
            width: '20%'
        }, {
          data: 'villageName',
          sort:'hs_area_name',
          width: '20%'
        }, {
          data: 'roomNo',
          sort:'hs_room_no',
          width: '10%'
        }, {
          data: 'address',
          sort:'hs_address',
          width: '20%'
        }
      ]
    });
    $('body').on('keydown', function(e) {
      var code = e.which;
      if(code == 13) {
        table.api().ajax.reload();
      }
    });
    $('#searchBtn').click(function() {
      table.api().ajax.reload();
    });


  });

</script>

